// src/views/user/UserList.tsx
import { useEffect, useState } from "react"
import { Button, Image, Space, Table } from 'antd'
import { WhatsAppOutlined } from '@ant-design/icons'

import { getUserList } from "../../api/admin"
type UserListProps = {}
export const UserList = (props: UserListProps) => {
  const [userList, setUserList] = useState<any[]>([]) //用户列表
  const [current, setCurrent] = useState(1) // 页码
  const [pageSize, setPageSize] = useState(5) // 每页显示个数

  const getList = async () => {
    let res = await getUserList()
    console.log(res.data.data)
    setUserList(res.data.data)
  }
  useEffect(() => {
    // IFFE 立即执行函数使用 async await
    // 单独封装一个方法，我们推荐的，方便复用
    getList()
  }, [])
  return (
    <>
      <Space direction='vertical' style={{ width: '100%' }}>
        <Table
          dataSource={userList}
          rowKey="userid"
          scroll={{ y: document.body.offsetHeight - 330 }}
          bordered
          pagination={{
            current,
            pageSize,
            onChange(page, pageSize) {
              setCurrent(page)
              setPageSize(pageSize)
            }
          }}
        >
          <Table.Column
            title="序号"
            render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
          ></Table.Column>
          <Table.Column
            title="头像"
            dataIndex="avatar"
            render={(text) => {
              return <Image src={text} height={75} alt="暂无头像" />
            }}
          ></Table.Column>
          <Table.Column
            title="昵称"
            dataIndex="nickname"
            render={(text) => { return text ? text : '匿名用户' }}
          ></Table.Column>
          <Table.Column
            title="电话"
            dataIndex="tel"
          ></Table.Column>
          <Table.Column
            title="创建时间"
            dataIndex="createTime"
            render={(text): any => { return new Date(parseInt(text)).toLocaleDateString() }}
          ></Table.Column>
          <Table.Column
            title="操作"
            render={(text, record: any, index) => {
              return (
                <Space>
                  <Button danger shape="circle" icon={<WhatsAppOutlined />} />
                </Space>
              )
            }}
          ></Table.Column>
        </Table>
      </Space>
    </>
  )
}